<!--
 * @Author: Yang Zhang
 * @Date: 2021-11-25 21:42:34
 * @LastEditors: Yang Zhang
 * @LastEditTime: 2021-12-29 22:49:49
 * @Description: 
-->
<template>
  <div>
    <div class="topsets">
      <div class="btns">
        <div class="daysbtn" @click.stop="search(7)">Last 7 days</div>
        <div class="daysbtn" @click.stop="search(30)">Last 30 days</div>
        <div class="daysbtn" @click.stop="search(0)">All</div>
      </div>
      <div class="selects">
        <a-range-picker
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD"
          :placeholder="['Start Time', 'End Time']"
          @change="onChange"
          @ok="onOk"
        />
        <div class="kol-btn kol-btn-primary" @click.stop="searchSub">Submit</div>
        <div class="kol-btn kol-btn-primary" @click.stop="reset">Reset</div>
      </div>
    </div>
    <div class="tables">
      <a-table :dataSource="dataSource" :columns="columns" :pagination="pagination" />
    </div>
  </div>
</template>

<script lang='ts' setup>
import { message } from 'ant-design-vue';
import { Dayjs } from 'dayjs';
import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue'
import { RouteLocationRaw, useRoute, useRouter } from 'vue-router';
import { addCarditem, delCard, getbankcardlst, getIncomelist, getWallet, withdrawMoney } from '../../../api/wallet';
import { getStorageItem, setStorageItem } from '../../../utils/utils';
import { ICarditem } from '../../types';
interface DataProps { }

const startTime = ref('')
const endTime = ref('')
// 时间段选择插件
const onChange = (value: Dayjs[], dateString: string[]) => {
  console.log('Selected Time: ', value);
  console.log('Formatted Selected Time: ', dateString);
  startTime.value = dateString[0]
  endTime.value = dateString[1]
}
const onOk = (value: Dayjs[]) => {
  console.log('onOk: ', value);
}

// 表格相关
const dataSource = ref<any[]>([])
const page = ref(1)
const pageSize = 40


const columns = [
  {
    title: 'Transaction No.',
    dataIndex: 'memberId',
    key: 'memberId',
  },
  {
    title: 'Date',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: 'Type of income',
    dataIndex: 'serviceType',
    key: 'serviceType',
  },
  {
    title: 'Income',
    dataIndex: 'money',
    key: 'money',
  },
]

const pagination = {
  current: page.value,
  defaultPageSize: pageSize
}

// 获取收入数据
const getDataSouce = async (param: { pageSize?: number; pageNumber?: number; searchType?: string; startTime?: string; endTime?: string; }) => {
  const res = await getIncomelist(param)
  console.log(res)
  if (res) {
    dataSource.value = res.result.records
  }
}



onMounted(() => {
  const param = {
    pageSize: pageSize,
    pageNumber: page.value
  }
  getDataSouce(param)
})

const searchType = ref('')

// 简便搜索
const search = (num: number) => {
  if (num === 7) {
    searchType.value = 'LAST_SEVEN'
    const param = {
      searchType: searchType.value
    }
    getDataSouce(param)
  } else if (num === 30) {
    searchType.value = 'LAST_THIRTY'
    const param = {
      searchType: searchType.value
    }
    getDataSouce(param)
  } else {
    searchType.value = 'ALL'
    const param = {
      searchType: searchType.value
    }
    getDataSouce(param)
  }
}

const searchSub = () => {
  const param = {
    pageSize: pageSize,
    pageNumber: page.value,
    startTime: startTime.value,
    endTime: endTime.value,
    searchType: searchType.value
  }
  getDataSouce(param)
}

const reset = () => {
  page.value = 1
  startTime.value = ''
  endTime.value = ''
  searchType.value = ''
  const param = {
    pageSize: pageSize,
    pageNumber: page.value,
    startTime: startTime.value,
    endTime: endTime.value,
    searchType: searchType.value
  }
  getDataSouce(param)
}

</script>
<style lang='scss'>
.income {
  width: 1600px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
}
</style>
